<template>
  <a-modal
    v-model:visible="modalVisible"
    :title="isAudit == 0 ? '查看' : '审核'"
    width="80%"
    :footer="null"
    @cancel="cancle"
    class="user-modal"
  >
    <slot>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-card title="服务信息">
          <block v-if="!directShow">
            <a-descriptions bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
              <a-descriptions-item label="服务对象">{{ info.name }}</a-descriptions-item>
              <a-descriptions-item label="服务项目">{{ info.serviceName }}</a-descriptions-item>
              <a-descriptions-item label="服务地址">{{ info.address }}</a-descriptions-item>
              <a-descriptions-item label="下单对象">{{ info.userName }}</a-descriptions-item>
              <a-descriptions-item label="服务时间">{{ info.scheduleTime }}</a-descriptions-item>
            </a-descriptions>
            <a-divider></a-divider>
          </block>
        </a-card>
        <a-card title=" 身份证正反面">
          <div class="df">
            <a-image :width="100" :src="info.idCardJust" />
            <div style="width: 25%; text-align: center">
              <a-image :width="100" :src="info.idCardAgainst" />
            </div>
          </div>
        </a-card>
        <div v-for="(item, index) in info.imgList" :key="index">
          <div v-if="info.xiXian == '0'">
            <a-card :title="item.value" v-if="item.yearNum == '0'">
              <div class="" style="display: flex">
                <div v-for="(i, index1) in item.list" :key="index1" style="width: 25%; text-align: center" class="wrap">
                  <a-image :width="100" :src="i" />
                </div>
              </div>
            </a-card>
          </div>
          <div v-else>
            <a-card :title="item.value" v-if="item.yearNum == '1'">
              <div class="" style="display: flex">
                <div v-for="(i, index1) in item.list" :key="index1" style="width: 25%; text-align: center">
                  <a-image :width="100" :src="i" />
                </div>
              </div>
            </a-card>
          </div>
        </div>
        <a-card title="备注">
          {{ info.otherInfo }}
        </a-card>
        <a-card title="审核信息">
          <div>审核人员：{{ info.auditPerson }}</div>
          <div>审核时间：{{ info.auditTime }}</div>
        </a-card>
        <!-- 审核护理报告:未通过 -->
        <a-card title="拒绝原因" v-if="info.cancelCase">{{ info.cancelCase }}</a-card>
      </a-form>
      <!-- 底部内容 -->
      <a-row v-if="isShowClose">
        <a-col :span="12" :offset="12">
          <a-button type="info" @click="cancle">关闭</a-button>
        </a-col>
      </a-row>
    </slot>

    <!-- 审核护理报告插槽 -->
    <div>
      <slot name="audit"> </slot>
    </div>
  </a-modal>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed } from 'vue'
import { selectOrderDetail } from '@/api/buisness/index'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    number: {
      type: Number,
      default: null
    },
    // 是否直接展示护理报告
    directShow: {
      type: Boolean,
      default: false
    },
    // 是否审核护理报告
    isAudit: {
      type: Number,
      default: null
    },
    isShowClose: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { emit, attrs }) {
    console.log(props.directShow, '护理报告')
    // 取消，右上角这个关闭也要调用这个方法
    const cancle = () => {
      emit('closeModal')
    }
    const info = ref({})
    const nursingRecord = ref('')
    const data = reactive({})
    // const visible = ref(false)
    const modalVisible = computed({
      get: () => props.visible,
      set: val => {
        emit('update:visible', val)
      }
    })

    if (!props.directShow) {
      init()
    }
    async function init() {
      let res = await selectOrderDetail(props.number)
      if (res.success) {
        info.value = res.object
        info.value.imgList = [
          {
            value: '手术史',
            list: res.object.operation.split(','),
            yearNum: ''
          },
          {
            value: '疾病史',
            list: res.object.illness.split(','),
            yearNum: ''
          },
          {
            value: '住院病历',
            list: res.object.caseDefinition.split(','),
            yearNum: ''
          },
          {
            value: '保单信息',
            list: res.object.guaranteeSlip.split(','),
            yearNum: ''
          },
          {
            value: '其他补充信息',
            list: res.object.otherInfoPic.split(','),
            yearNum: ''
          }
        ]
        if (info.value.operation != '') {
          info.value.xiXian = '0'
          info.value.imgList[0].yearNum = '0'
          info.value.imgList[1].yearNum = '0'
          info.value.imgList[4].yearNum = '0'
        } else {
          info.value.xiXian = '1'
          info.value.imgList[2].yearNum = '1'
          info.value.imgList[3].yearNum = '1'
          info.value.imgList[4].yearNum = '1'
        }
      }
    }
    onMounted(() => {})
    return {
      ...toRefs(data),
      labelCol: {
        style: {
          width: '100px',
          fontWeight: 'bolder'
        }
      },
      wrapperCol: {
        span: 20,
        offset: 1
      },
      cancle,
      info,
      nursingRecord,
      modalVisible
    }
  }
}
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 10px;
}
</style>
